<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:cms="http://thymeleafexamples">
<head th:include="include/head"><!--引用CSS文件-->
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!--    <h1>活动详情页</h1>-->
    <!--    <text th:text="${activity.activityName}"></text>-->
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>相册详情</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">首页</a></li>
                            <li class="breadcrumb-item active">相册详情</li>
                        </ol>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <section class="content">
            <div class="card card-info">
                <div class="card-header">
                    <h3 class="card-title">相册详情</h3>
                </div>
                <input type="hidden"  id="majorId" name="majorId" th:value="${detail.moment.momentId}" />
                <div class="card-body">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">内容</label>
                        <div class="col-sm-10">
                            <text name="majorNam"  required id="activityName" placeholder="活动名称" th:text="${detail.moment.momentContent}"></text>
                            <!--                                <input type="text" class="form-control" name="majorNam"  required id="activityName" placeholder="活动名称" aria-required="true" th:value="${activity.activityName}">-->
                            <!--                                <label class="help-block m-b-none" for="activityName" id="name-error"><i class="far fa-bell"></i>必填项</label>-->
                        </div>
                    </div>


<!--                    <div class="form-group row">-->
<!--                        <label for="userName" class="col-sm-2 col-form-label">活动发起人</label>-->
<!--                        <div class="col-sm-10">-->
<!--                            <text th:text="${activity.userName}"></text>-->
<!--                        </div>-->
<!--                    </div>-->
                    <hr>
                    <div class="form-group row">
                        <label for="momentData" class="col-sm-2 col-form-label">图片</label>
                        <div class="col-sm-10" th:each="url : ${list}">
                            <img th:src="${url}" style="width: 400px"/>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group row">
                        <label for="activityStart" class="col-sm-2 col-form-label">发布时间</label>
                        <div class="col-sm-10">
                            <text th:text="${#dates.format(detail.moment.recTime, 'yyyy-MM-dd HH:mm:ss')}"></text>
                        </div>
                    </div>
                    <hr>

                    <div class="form-group row">
                        <label for="activityDesc" class="col-sm-2 col-form-label">评论</label>
                        <div class="col-sm-10">
<!--                           新增 th:attr="id='id'+${bean.commentId}"-->
                        <div class="post" th:each="bean : ${detail.commentList}" th:attr="id='id'+${bean.commentId}">
                            <div class="user-block">
                                <img class="img-circle img-bordered-sm" th:src="${bean.commentUserPic}" >
                                <span class="username">
                          <a href="#"  th:text="${bean.commentUserName}"></a>
<!--                          <a href="#" class="float-right btn-tool"><i class="fas fa-times"></i></a>-->
                        </span>
<!--                                <span class="description">Shared publicly - 7:30 PM today</span>-->
                            </div>
                            <!-- /.user-block -->
                            <p  th:text="${bean.commentContent}">
                                Lorem ipsum represents a long-held tradition for designers,
                                typographers and the like. Some people hate it and argue for
                                its demise, but others ignore the hate as they create awesome
                                tools to help create filler text for everyone from bacon lovers
                                to Charlie Sheen fans.
                            </p>
                            <p>
<!--                                <a href="#" class="link-black text-sm mr-2"><i class="fas fa-trash-alt mr-1"></i> 删除</a>-->
                                <a  href="#" th:attr="data-id=|${bean.commentId}"  class="link-black text-sm mr-2 del">
                                    <i class="fas fa-trash-alt mr-1" id="del"></i>删除
                                </a>
<!--                                <a href="#" class="link-black text-sm"><i class="far fa-thumbs-up mr-1"></i> Like</a>-->

                            </p>



                        </div>
                        </div>
<!--                        <div class="col-sm-10">-->
<!--                            <text th:text="${bean.momentContent}"></text>-->
<!--                        </div>-->
                    </div>
                    <hr>
                    <div class="form-group row">
                        <label for="activityState" class="col-sm-2 col-form-label">状态</label>
                        <div class="col-sm-10">
                            <text th:if="${detail.moment.momentState}==1">启用</text>
                            <text th:if="${detail.moment.momentState}==0">禁用</text>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="button" class="btn btn-info" th:attr="data-pid=|${detail.moment.momentId}" id="back">返回</button>
                    <!--                        <button type="submit" class="btn btn-info">返回</button>-->

                </div>
                </form>
            </div>
        </section>
    </div>
</div>
<!-- ./wrapper -->
<div th:include="include/foot"></div>
<script>
    $.validator.setDefaults({
        highlight : function(a) {
            $(a).removeClass("is-valid").addClass(
                "is-invalid");
        },
        success : function(a) {
            $(a).prev().removeClass("is-invalid").addClass(
                "is-valid");
            $(a).html('<i class="fas fa-check"></i>验证成功');
        },
        errorClass:"help-block m-b-none",
// 		validClass:"help-block m-b-none",
        errorPlacement:function(a,b){
            if(b.is(":radio")||b.is(":checkbox")){
                a.appendTo(b.parent().parent().parent())
            }else{
                a.appendTo(b.parent())
            }},
        submitHandler:function(form){loadPage();form.submit();}
    });

    $.validator.addMethod("checkCode", function(value, element) {
        console.log(value)
        if (value == '') {
            return true;
        }
        let result = false;
        let id = $("#majorId").val();
        $.ajax({
            url : 'checkCode?id=' + id + '&code=' + value+ '&type=' + 1,
            async : false,
            success : function(e) {
                result = e.res;
            },error:function(e){
                layer.msg(e.responseText, {icon: 5});
            }
        });
        return result;
    }, "");
    $.validator.addMethod("checkName", function(value, element) {
        console.log(value)
        if (value == '') {
            return true;
        }
        let result = false;
        let id = $("#majorId").val();
        $.ajax({
            url : 'checkCode?id=' + id + '&code=' + value+ '&type=' + 2,
            async : false,
            success : function(e) {
                result = e.res;
            },error:function(e){
                layer.msg(e.responseText, {icon: 5});
            }
        });
        return result;
    }, "");
    $().ready(function() {
        $("#back").click(function() {
            loadPage();
            let pId=$(this).data('pid');
            console.log(pId);
            // location.href = 'majorList?pId='+pId;
            location.href = 'list';
        });
        $("#form").validate({
            rules : {
                name : "required",
                descritpion : "required",
                url:"required",
                isShow:{
                    required:true,
                    minlength:1
                },
                majorName : {
                    required:true,
                    checkName : true
                },
                back5 : {
                    required:true,
                    checkCode : true,
                    maxlength:20
                },
            },
            messages : {
                name : '<i class="far fa-times-circle"></i>请输入目录名称',
                descritpion : '<i class="far fa-times-circle"></i>请输入目录描述',
                url :'<i class="far fa-times-circle"></i>请输入目录链接',
                isShow:'<i class="far fa-times-circle"></i>请选择是否显示',
                majorName : {
                    required : '<i class="far fa-times-circle"></i>请输入专业名称',
                    checkName : '<i class="far fa-times-circle"></i>专业已存在'
                },
                back5 : {
                    required : '<i class="far fa-times-circle"></i>请输入编码',
                    checkCode : '<i class="far fa-times-circle"></i>编码已经使用',
                    maxlength : '代码最大长度为{0}'
                },
            }
        });
        //新增删除方法
        $(".del").click(function() {
            if (confirm('确定删除内容吗？')) {
                let id = $(this).data('id');
                $.ajax({
                    url : 'delete?id=' + id,
                    success : function(e) {
                        if (e.res) {
                            $("#id" + id).remove();
                            layer.msg('删除成功', {icon: 1})
                        }
                    },error:function(e){
                        layer.msg(e.responseText, {icon: 5});
                    }
                });
            }

        });
    });
    loadPage=function(){
        window.parent.loadPage();
    }
</script>
</body>
</html>